// 背景色
$bgcolor: #e3edf7;
// $bgcolor:#ecf0f3;
// 文字色
$fontcolor: #6e6e6e;
$blue-color: #067cf8;
// 字体大小
$fontsize: 14px;
// $theme-color: #567e7a;
$theme-color: #1777ff;

$boolean: true;

$black: #181818;

$box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15), -6px -6px 10px -1px rgba(255, 255, 255, 0.7);

a {
  text-decoration: none;
}
img {
  -webkit-user-drag: none; // 禁止拖动图片
}


// flex-column
@mixin flex-column($jc: space-around, $ai: center) {
  display: flex;
  flex-direction: column;
  align-items: $ai;
  justify-content: $jc;
}
// flex
@mixin flex($jc: space-evenly, $fd: row) {
  display: flex;
  align-items: center;
  justify-content: $jc;
  flex-direction: $fd;
}
// 按钮样式
.button {
  border-radius: 5px;
  height: 32px;
  color: #fff;
  background-color: $theme-color;
  border: none;
  @include flex(center);
  cursor: pointer;
}





// 滚动条样式
/* 滚动槽 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.06);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08);
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  // background: rgba(0,0,0,0.12);
  background-color: $theme-color;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}

// $themes: (
//     Red: ( //整体主色调/菜单栏背景/图标.按钮主色/悬停状态
//         bgcolor: #4acac9, //主题色
//         titleColor: #5f95cc, //默认字体色/二级信息字体色
//     ),
//     Blue: ( //整体主色调/菜单栏背景/图标.按钮主色/悬停状态
//         mainColor: #409EFF, //菜单选中背景色/点击状态/文字,按钮按下
//         titleColor: #d64e18, //列表背景色
//     ),
// );

// @mixin themeify {

//     @each $theme-name,
//     $theme-map in $themes {
//         //!global 把局部变量强升为全局变量
//         $theme-map: $theme-map !global;

//         //判断html的data-theme的属性值  #{}是sass的插值表达式
//         //& sass嵌套里的父容器标识   @content是混合器插槽，像vue的slot
//         [data-theme="#{$theme-name}"] & {
//             @content;
//         }
//     }
// }

// //从主题色map中取出对应颜色
// @function themed($key) {
//     @return map-get($theme-map, $key);
// }

// //获取背景颜色
// @mixin background_color($color) {
//     @include themeify {
//         background-color: themed($color) !important;
//     }
// }

// //获取字体颜色
// @mixin font_color($color) {
//     @include themeify {
//         color: themed($color) !important;
//     }
// }
